<template>
  <div>
    <input type="file" @change="onChange" />
  </div>
</template>

<script setup lang="ts">
const onChange = (event: Event) => {
  // 单个切片的大小，单位是字节，5M
  const chunkSize = 1024 * 1024 * 5;

  // 1. 获取文件内容
  const file = (event.target as HTMLInputElement).files?.[0]!;
  console.log("file", file);

  // 2. 基于 文件大小与切片大小 计算出有多少个切片
  const chunkNumber = Math.ceil(file.size / chunkSize);
  console.log("chunkNumber", chunkNumber);

  // 3. 循环数量来切片
  const result = []; // 用于收集所有的切片
  for (let i = 0; i < chunkNumber; i++) {
    const start = i * chunkSize;
    const end = start + chunkSize > file.size ? file.size : start + chunkSize;
    const blob = file.slice(start, end);
    result.push(blob);
  }

  console.log("result", result);
};
</script>
